<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :xs="24" :md="8">
        <div class="box">
          <div class="tit">新机预订</div>
          <div>{{totalCount.reserveTotal}}</div>
        </div>
      </el-col>
      <el-col :xs="24" :md="8">
        <div class="box">
          <div class="tit">取机成功</div>
          <div>{{totalCount.receiveTotal}}</div>
        </div>
      </el-col>
      <el-col :xs="24" :md="8">
        <div class="box">
          <div class="tit">转化率</div>
          <div>{{totalCount.conversionRate}}</div>
        </div>
      </el-col>
    </el-row>
    <div class="newest">
      <div class="tit">订购实时</div>
      <el-table
        :data="list"
        stripe
        style="width: 100%">
        <el-table-column
          prop="phoneType"
          label="机型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="mergeStore"
          label="所属">
        </el-table-column>
        <el-table-column
          prop="guide"
          label="导购员"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="时间"
          width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'dashboard',
  data() {
    return {
      totalCount: '',
      list: []
    }
  },
  created() {
    Promise.all([
      this.countData(),
      this.fetchData()
    ]).then((res) => {
    })
  },
  methods: {
    countData(option) {
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$axios({
          url: '/reservephone/admin/Orders/countData.json',
          method: 'post'
        }).then((res) => {
          _this.totalCount = res.data
          resolve(res)
        }).catch(() => {
          reject(err)
        })
      })
    },
    fetchData(option) {
      let _this = this
      return new Promise((resolve, reject) => {
        let page = {
          offset: 1,
          pageSize: 10
        }
        _this.$axios({
          url: '/reservephone/admin/Orders/listCurrentOrders.json',
          method: 'post',
          data: _this.$qs.stringify(page)
        }).then((res) => {
          _this.list = res.data
          resolve(res)
        }).catch(() => {
          reject(err)
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}
.el-col{
  margin-bottom: 10px;
}
.box{
  background: #FAFAFA;
  padding: 20px;
}
.newest{
  margin-top: 20px;
}
</style>
